<!DOCTYPE html>
<html lang="ch-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博美首页</title>
  <style>
    /* 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    image {
      display: block;
    }

    /* 设置默认样式 */
    a {
      text-decoration: none;
      color: #646464;
    }

    h1,
    h2,
    h3 {
      font-size: 16px;
    }

    body {
      font-family: Arial;
    }

    /* 添加及清除浮动 */
    .l {
      float: left;
    }

    .r {
      float: right;
    }

    .clear::after {
      content: "";
      display: block;
      clear: both;
    }

    /* 通栏和版心 */
    .container {
      width: 1080px;
      position: relative;
      margin: 0 auto;
    }

    .container-fluid {
      width: 100%;
    }

    /* 页面顶部 */
    #head {
      height: 81px;
    }

    #head .head_logo {
      width: 162px;
      height: 44px;
      margin-top: auto;
    }

    #head .head_menu {
      font-size: 14px;
      line-height: 81px;
    }

    #head .head_menu li {
      float: left;
      margin-left: 58px;
    }

    /* 主体容器 */
    .area_title {
      margin-top: 60px;
      text-align: center;
    }

    /* 主体标题 */
    .area_title h2 {
      height: 20px;
      line-height: 14px;
      font-size: 20px;
      color: #363636;
      background: url(../images/title_bg.png) no-repeat center 2px;
      font-weight: normal;
    }

    /* 主题副标题 */
    .area_title p {
      color: #9f9f9f;
      font-size: 14px;
      line-height: 10px;
    }

    /* 整块容器 */
    #banner {
      position: relative;
    }

    /* 图片容器 */
    #banner .banner_list {
      width: 100%;
      height: 469px;
      position: relative;
    }

    /* 图片个体 */
    #banner .banner_list li {
      width: 100%;
      height: 100%;
      background: center 0 no-repeat;
      position: absolute;
      opacity: 0;
      z-index: 1;
      left: 0;
      top: 0;
    }

    /* 选中的图片 */
    #banner .banner_list li.active {
      opacity: 1;
      z-index: 10;
    }

    /* 图片链接 */
    #banner .banner_list a {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* 点容器 */
    #banner .banner_btn {
      width: 100%;
      position: absolute;
      bottom: 19px;
      z-index: 20;
      font-size: 0;
      text-align: center;
    }

    /* 点个体 */
    #banner .banner_btn li {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px white solid;
      border-radius: 50%;
      box-sizing: border-box;
      margin: 0 6px;
      cursor: pointer;
    }

    /* 选中的点 */
    #banner .banner_btn li.active {
      background: white;
    }

    /* 服务范围容器 */
    #service {
      overflow: hidden;
      min-height: 407px;
    }

    /* 服务范围主体 */
    #service .service_list {
      text-align: center;
      margin-top: 34px;
    }

    /* 四个区 */
    #service .service_list li {
      float: left;
      width: 250px;
      margin: 0 10px;
    }

    /* 照片容器 */
    #service .service_list div {
      width: 102px;
      height: 102px;
      margin: 0 auto;
    }

    /* 四个照片 */
    #service .service_list :nth-of-type(1) div {
      background: url(../images/web1.png);
    }

    #service .service_list :nth-of-type(2) div {
      background: url(../images/graphic1.png);
    }

    #service .service_list :nth-of-type(3) div {
      background: url(../images/e-bussiness1.png);
    }

    #service .service_list :nth-of-type(4) div {
      background: url(../images/mail1.png);
    }

    /* 文本标题 */
    #service .service_list h3 {
      font-size: 18px;
      color: #434343;
      line-height: 36px;
      margin-top: 25px;
    }

    /* 文本内容 */
    #service .service_list p {
      font-size: 14px;
      color: #6d6d6d;
      line-height: 22px;
    }

    /* 用户案例 */
    #case {
      background: #f8f8f8;
    }

    #case .container {
      min-height: 460px;
      overflow: hidden;
    }

    /* 标题 */
    #case .area_title {
      margin-top: 55px;
    }

    #case .srea_title h2 {
      color: #66c5b4;
    }

    /* 图片 */
    #case .case_list {
      margin-top: 28px;
    }

    #case .case_list li {
      float: left;
      width: 340px;
      margin: 0 10px;
    }

    /* 按钮 */
    #case .case_btn {
      width: 176px;
      height: 37px;
      background: #66c5b4;
      margin: 0 auto;
      border-radius: 25px;
      line-height: 37px;
      text-align: center;
      font-size: 14px;
    }

    #case .case_btn a {
      display: block;
      height: 100%;
      width: 100%;
      color: white;
      margin-top: 36px;
    }

    #news {
      min-height: 450px;
      overflow: hidden;
    }

    /* 标题 */
    #news .area_title {
      margin-top: 65px;
    }

    /* 内部样式为表格嵌套列表 */
    /* 表格 */
    #news dl {
      margin-top: 48px;
    }

    #news dt {
      width: 234px;
    }

    #news dd {
      width: 846px;
    }

    /* 列表 */
    #news .news_list {
      width: 100%;
    }

    #news .news_list li {
      width: 50%;
      float: left;
      margin-bottom: 48px;
    }

    /* 日期 */
    #news .news_date {
      width: 71px;
      height: 70px;
      border-right: 1px solid #dcdcdc;
      text-align: center;
    }

    #news .news_date i {
      color: #66c5b4;
      font-size: 39px;
      display: block;
      font-weight: bold;
    }

    #news .news_date span {
      color: #999999;
      font-size: 20px;
      line-height: 36px;
    }

    /* 文本 */
    #news .news_text {
      width: 310px;
      margin-left: 20px;
    }

    #news .news_text h3 {
      font-size: 14px;
    }

    #news .news_text h3 a {
      color: #3f3f3f;
    }

    #news .news_text p {
      color: #a4a4a4;
      font-size: 12px;
      line-height: 21px;
      margin-top: 17px;
    }

    /* 页脚 */
    #foot {
      background: #66c5b4;
    }

    #foot .container {
      height: 54px;
      line-height: 54px;
      font-size: 12px;
      color: white;
    }

    #foot div a {
      color: white;
      margin: 0 10px;
    }
  </style>
</head>

<body>
  <!-- 顶部导航 -->
  <div id="head" class="container">
    <div class="head_logo l">
      <a href="#">
        <img src="../images/logo1.png" alt="博文尚美" alt="博文尚美">
      </a>
    </div>
    <ul class="head_menu r">
      <li>
        <a href="#">HOME</a>
      </li>
      <li>
        <a href="#">ABOUT</a>
      </li>
      <li>
        <a href="#">PROTFOLIO</a>
      </li>
      <li>
        <a href="#">SERVICE</a>
      </li>
      <li>
        <a href="#">NEWS</a>
      </li>
      <li>
        <a href="#">CONTACT</a>
      </li>
    </ul>
  </div>
  <!-- 主页大图片 -->
  <div id="banner" class="container-fluid">
    <ul class="banner_list">
      <li class="active" style="background-image:url(../images/5.jpg)">
        <a href="#"></a>
      </li>
    </ul>
    <ol class="banner_btn">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <!-- 服务范围面板 -->
  <div id="service" class="container">
    <div class="area_title">
      <h2>服务范围</h2>
      <p>OUR SERVICES</p>
    </div>
    <ul class="service_list">
      <li>
        <div></div>
        <h3>1.WEB DESIGN</h3>
        <p>
          企业品牌网站设计/手机网站制作
          <br>
          动画网站创意设计
        </p>
      </li>
      <li>
        <div></div>
        <h3>2.GRAPHIC DESIGN</h3>
        <p>
          标志logo设计/产品宣传册设计
          <br>
          企业广告/海报设计
        </p>
      </li>
      <li>
        <div></div>
        <h3>3.E-BUSINESS PLAN</h3>
        <p>
          淘宝/天猫装修设计及运营推广
          <br>
          企业微博、微信营销
        </p>
      </li>
      <li>
        <div></div>
        <h3>4.MAILBOXAGENTS</h3>
        <p>
          腾讯/网易企业邮箱品牌代理
          <br>
          个性化邮箱定制开发
        </p>
      </li>
    </ul>
  </div>
  <div id="case" class="container-fluid">
    <div class="container">
      <div class="area_title">
        <h2>{ 客户案例 }</h2>
        <p>With the best professional technology, to design the best innovative web site</p>
      </div>
      <ul class="case_list clear">
        <li>
          <a href="#"><img src="../images/1.jpg" alt=""></a>
        </li>
        <li>
          <a href="#"><img src="../images/2.jpg" alt=""></a>
        </li>
        <li>
          <a href="#"><img src="../images/3.jpg" alt=""></a>
        </li>
      </ul>
      <div class="case_btn">
        <a href="#">VIEW MORE</a>
      </div>

    </div>
  </div>
  <!-- 最新资讯面板 -->
  <div id="news" class="container">
    <div class="area_title">
      <h2>最新资讯</h2>
      <p>TEH LATEST NEWS</p>
    </div>
    <dl>
      <dt class="l">
        <img src="../images/4.jpg" alt="">
      </dt>
      <dd class="l">
        <ul class="news_list">
          <li>
            <div class="news_date l">
              <i>09</i>
              <span>Jan</span>
            </div>
            <div class="news_text l">
              <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
              <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
                首页，更不用说进首页前三了。那么网站优...</p>
            </div>
          </li>
          <li>
            <div class="news_date l">
              <i>08</i>
              <span>Jan</span>
            </div>
            <div class="news_text l">
              <h3><a href="#">flash网站制作的优缺点</a></h3>
              <p>虽然HTML5程序语言出现,大有逐渐代替Flash网站制作的意味,但是过于生硬的HTML5动画效果,始终..</p>
            </div>
          </li>
          <li>
            <div class="news_date l">
              <i>07</i>
              <span>Jan</span>
            </div>
            <div class="news_text l">
              <h3><a href="#">做个网站多少钱？</a></h3>
              <p>“做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...</p>
            </div>
          </li>
          <li>
            <div class="news_date l">
              <i>06</i>
              <span>Jan</span>
            </div>
            <div class="news_text l">
              <h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3>
              <p>大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...</p>
            </div>
          </li>
        </ul>
      </dd>
    </dl>
  </div>
  <!-- 页脚 -->
  <div id="foot" class="container-fluid">
    <div class="container">
      <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
      <div class="r">
        <a href="#">Home</a>|<a href="#">About</a>|<a href="#">Portfolio</a>|<a href="#">Contact</a>
      </div>
    </div>
  </div>
</body>


</html>